<template>
  <el-dialog top="32vh"
             append-to-body
             width="480px"
             :visible.sync="pictureShow"
             :close-on-click-modal="false">
    <div slot="title">完成拼图验证</div>
    <div v-if="pictureShow"
         class="authen-show">
      <authentication :on-success="success"
                      :on-syntony="picture"
                      width="260"
                      height="120"
                      pl-size="30"
                      deviation="5"
                      :puzzle-img-list="imgLists"
                      class="auth-entication-style"
                      @fatherMethod="pictureShow = false" />
    </div>
  </el-dialog>
</template>

<script>
import { graphicalValidate } from "@/api/modules/enroll";
import { Decrypt } from "@/libs/crypto";

export default {
  name: 'AppendToBody',
  model: {
    prop: 'pictureShow',
    event: 'close'
  },
  props: {
    pictureShow: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {

    }
  },
  methods: {
    success () {
      // this.pictureShow = false;
      // this.changeSendCode(this.ruleForm);
      // this.sendOutTime();
      this.$emit('close', false)
    },
    picture () {
      graphicalValidate().then((res) => {
        // let { requestId, url, imageName, beginXPoint, beginYPoint, endXPoint, endYPoint } = res.data
        let { iv, imageUrl, imageName, beginX, beginY, endX, endY } = res.data;
        this.ruleForm.requestId = iv;
        const imtUrl = Decrypt(imageUrl, iv, iv) + Decrypt(imageName, iv, iv);
        this.imgLists.push(imtUrl);
        const [o1, o2, o3, o4, o5] = [
          Decrypt(beginX, iv, iv),
          Decrypt(beginY, iv, iv),
          Decrypt(endX, iv, iv),
          Decrypt(endY, iv, iv),
          Decrypt(imageUrl, iv, iv)
        ];
        const verifyList = o5 + iv + o1 + o2 + o3 + o4;
        this.ruleForm.captcha = this.$md5(verifyList);
        this.pictureShow = true;
      });
    },
  }
}
</script>

<style>
</style>